.namemv {
  padding: 15px;
}

.recmv-items {
  display        : flex;
  justify-content: space-around;

  .recomm-item {
    width: 20%;

    .img-warp {
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
      }

      span {
        width      : 30px;
        height     : 30px;
        position   : absolute;
        left       : 0;
        opacity    : 0.1;
        font-size  : 30px;
        text-align : center;
        margin-left: 50%;
        transform  : translate3d(-15px, 90%, 0);

        // 字体图标
        .iconfont-sp {
          opacity   : inherit;
        }
      }

      .num-warp {

        position  : absolute;
        top       : 0px;
        right     : 10px;
        display   : flex;
        text-align: center;
        font-size : 13px;

        .icon-play {
          display    : flex;
          color      : white;
          font-size  : 12px;
          align-items: center;
        }

        .num {
          color: white;
        }
      }

    }

    .info-warp {

      color: rgb(61, 59, 59);

      .name {
        font-size: 13px;
        overflow          : hidden;
        text-overflow     : ellipsis;
        display           : -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        margin-top: 3px;
      }

      .singer {
        margin-top: 4px;
        color     : rgb(149, 147, 147);
        font-size : 12px;
      }
    }
  }

  .recomm-item :hover .sp-icon {
    transition: all 0.5s;
    opacity   : 0.9;
  }

}